<template>
    <div class="topOne">
        <!-- input输入框 -->
        <el-input v-model="input" v-show="obj.inputOne.done" :placeholder="obj.inputOne.tishi" class="topOne-input"
            clearable />
        <!-- 下拉菜单 -->
        <el-select v-model="selectOne" v-show="obj.selectOne.done" class="m-2" :placeholder="obj.selectOne.tishi"
            style="width: 180px">
            <el-option v-for="item in obj.selectOne.todoDone" :key="item.value" :label="item.label"
                :value="item.value" />
        </el-select>
        <el-select v-model="selectTwo" v-show="obj.selectTwo.done" class="m-2" :placeholder="obj.selectTwo.tishi"
            style="width: 180px">
            <el-option v-for="item in obj.selectTwo.todoDone" :key="item.value" :label="item.label"
                :value="item.value" />
        </el-select>
        <el-select v-model="selectThere" v-show="obj.selectThere.done" class="m-2" :placeholder="obj.selectThere.tishi"
            style="width: 180px">
            <el-option v-for="item in obj.selectThere.todoDone" :key="item.value" :label="item.label"
                :value="item.value" />
        </el-select>
        <!-- inut输入框 最后有小人的 -->
        <el-input v-show="obj.inputTwo.done" v-model="input1" :placeholder="obj.inputTwo.tishi" :suffix-icon="Avatar"
            class="topOne-input" />
        <!-- 时间 -->
        <el-date-picker v-model="value1" v-show="obj.inputThere.done" type="datetime"
            :placeholder="obj.inputThere.tishi" @change="changeOne(value1)" format="YYYY/MM/DD" />
        <!-- 按钮 -->
        <el-button type="primary" @click="getAll">
            <el-icon>
                <Search />
            </el-icon>
            查询
        </el-button>
        <el-button type="info" @click="clearAll">
            <el-icon>
                <Refresh />
            </el-icon>
            重置
        </el-button>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Avatar } from '@element-plus/icons-vue'
let { obj, getYao, datalist } = defineProps(['obj', 'getYao', 'datalist'])
// 获取input框的值
const input = ref('')
// 获取select中的值
const selectOne = ref()
const selectTwo = ref()
const selectThere = ref()
// 背后有小人
const input1 = ref()
// 带时间的输入框
const value1 = ref('')

// 切换时间
function changeOne(date:any) {
    // 获取年、月、日
    var year = date.getFullYear();
    var month = date.getMonth() + 1; // 月份是从 0 开始的，所以需要加 1
    var day = date.getDate();

    // 将月份和日期格式化为两位数
    month = (month < 10) ? '0' + month : month;
    day = (day < 10) ? '0' + day : day;

    // 构造年月日的形式
    value1.value = year + '-' + month + '-' + day;
}

// 点击查询查询所有
const getAll = () => {
    let allObj = {
        inputOne: input.value,
        inputTwo: input1.value,
        inputThere: value1.value,
        selectOne: selectOne.value,
        selectTwo: selectTwo.value,
        selectThere: selectThere.value
    }
    getYao(allObj)

}
const clearAll = () => {
    input.value = ''
    input1.value = ''
    selectOne.value = ''
    selectTwo.value = ''
    selectThere.value = ''
    let allObj = {
        inputOne: input.value,
        inputTwo: input1.value,
        selectOne: selectOne.value,
        selectTwo: selectTwo.value,
        selectThere: selectThere.value
    }
    getYao(allObj)
    datalist()
}
</script>

<style scoped lang="less">
.topOne {
    width: 100%;
    height: 15vh;
    display: flex;
    align-items: center;
    justify-content: space-around;
    background-color: rgb(255, 255, 255);
    margin-bottom: 3vh;

    .topOne-input {
        width: 180px;
    }

    .demo-datetime-picker {
        display: flex;
        width: 100%;
        padding: 0;
        flex-wrap: wrap;
    }

    .demo-datetime-picker .block {
        padding: 30px 0;
        text-align: center;
        border-right: solid 1px var(--el-border-color);
        flex: 1;
    }

    .demo-datetime-picker .block:last-child {
        border-right: none;
    }

    .demo-datetime-picker .demonstration {
        display: block;
        color: var(--el-text-color-secondary);
        font-size: 14px;
        margin-bottom: 20px;
    }
}
</style>